<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <style>
        .box{
            padding:10px 20px;
            border:none;
            outline: none;
            border-radius: 10px;
            background: darkorange;
            color:#fff;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="app">
         
        <button class="box" v-shuibowen="'orange'">点击 me </button>
        <button class="box" v-shuibowen>点击 me 1</button>
        <button class="box" v-shuibowen>点击 me 22</button>
        <button class="box" v-shuibowen>点击 me 3333</button>
        <button class="box" v-shuibowen="'pink'">点击 me 444444</button>
    </div>
    
    <script>
        Vue.directive("shuibowen",{
            bind(el,binding){
                el.addEventListener("click",function(e){
                    var e = e || window.event;
                    var x = e.clientX - el.offsetLeft;
                    var y = e.clientY - el.offsetTop;
                    var left = el.offsetLeft
                    var top = el.offsetTop;

                    var span = document.createElement("span");
                    span.style.pointerEvents = 'none';
                    span.style.position = "absolute"
                    span.style.left = x +'px'
                    span.style.top = y + 'px'
                    span.style.borderRadius = '50%';
                    var bg = binding.value || 'rgba(0,0,0,0.5)';

                    // 获取el 父元素的 背景颜色  
                    span.style.background = bg


                    el.append(span);
                    var height = 0
                    var width = 0;
                    var opacity = 1;
                    var timer = setInterval(()=>{
                        height+=6;
                        width+=6;
                        opacity-=0.03;

                        span.style.left = x - span.clientWidth /2  + 'px'
                        span.style.top = y - span.clientHeight  /2  + 'px'


                        span.style.width = width + 'px'
                        span.style.height = height + 'px'
                        span.style.opacity = opacity
                        if(opacity<0){
                            clearInterval(timer);
                            span.remove();
                        }
                    },10);
                })
            },
            inserted(el,binding){

            }
        })
        const vm = new Vue({
            
        }).$mount("#app")
    </script>
</body>
</html>